<style lang="scss" scoped>
  .people-strip {
    border-bottom: .5px solid #d9d9d9;
    display: flex;
    .img_box,.text_box {
      margin-right: 3.5vw;
    }
    .time, .text_name {
      margin-bottom: 1vw;
    }
    .img_box {
      width: 11vw;
      height: 11vw;
      border-radius: 50%;
    }
    .text_box {
      width: 60vw;
      .text_name {
      }
      .text_info {
        -webkit-line-clamp: 1;
      }
    }
    .info_box {
      .time {
      }
      .num {
        height: auto;
      }
    }
  }
</style>

<template lang="pug">
  router-link.people-strip.container_min(to="\chat_together\1" tag="div")
    img.img_box(:src="newData.img")
    .text_box
      .text_name.ellipiss {{newData.textBox.name}}
      .text_info.lists_ellipsis.gray {{newData.textBox.info}}
    .info_box(v-if="newData.infoBox")
      .time {{newData.infoBox.time | formatTime([0, 3])}}
      mu-list-item-action.num.box_reverse(v-if="newData.infoBox.num > 0")
        mu-badge(:content="num" :color="numColor")
</template>

<script>
  import {mapState, mapGetters, mapMutations} from 'vuex'
  // 每条信息
  export default {
    name: "people-strip",
    props: {
      newData: Object,
    },
    data() {
      return {}
    },
    computed: {
      ...mapState([]),
      ...mapGetters([]),
      num() {
        const data = this.newData;
        if(data.infoBox){
          return (data.infoBox.num > 99 ? '99+' : data.infoBox.num).toString();
        }else {
          return 0;
        }
      },
      numColor(){
        const map = {
          'success': 10,
          'primary': 45,
          'red': 99,
        }
        if(this.num.length === 3){
          return 'red';
        }else {
          for(let key in map){
            if(this.num <= map[key]) return key;
          }
        }

      }
    },
    methods: {
      ...mapMutations([]),

    },
    created() {
    },
    mounted() {

    }
  }
</script>

